<template>
    <div class="loginBox">
        <h1 class="title">MECMS后台管理系统</h1>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline @submit.native.prevent>
            <Row>
                <Col span="24">
                    <FormItem prop="user">
                        <Input type="text" v-model="formInline.user" placeholder="用户" class="input-width">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="密码" class="input-width">
                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem prop="verifyCode">
                        <Row>
                            <Col span="16">
                                <Input type="text" v-model="formInline.verifyCode" placeholder="验证码" >
                                </Input>
                            </Col>
                            <Col span="6" offset="2">
                                <img :src="formInline.verifyUrl" @click="sendVilidate" title="点击刷新验证码" ref="verifyImage">
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem>
                        <Button type="primary" @click.stop="handleSubmit('formInline')" @keyup.enter="handleSubmit('formInline')"  long class="input-width">登录</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
    import md5 from 'md5'
    
    export default {
        data () {
            return {
                formInline: {
                    user: '',
                    password: '',
                    verifyCode: '',
                    verifyUrl: process.env.API_ROOT + '/verifyImage.php'
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写用户名！', trigger: 'blur' },
                        { type: 'string', min: 5, message: '字母和数字组合5-16位内!', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码！', trigger: 'blur' },
                        { type: 'string', min: 5, message: '字符数必须大于等于5！', trigger: 'blur' }
                    ],
                    verifyCode: [
                        { required: true, message: '请填写验证码！', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            sendVilidate($event){
                var target = this.$refs['verifyImage'];
                target.src = this.formInline.verifyUrl + '?' + Math.round(Math.random()*10000);
            },
            handleSubmit(name) {
                var that = this;
                that.$refs[name].validate((valid) => {
                    if (valid) {
                        // 设置登录按钮disabled,防止重复点击
                        that.$loading.show('登录中');

                        // 登录后台
                        that.$util.ajax({
                            that: that,
                            url: '/login/loginin/',
                            data:{
                                name: that.formInline.user,
                                password: md5(that.formInline.password),
                                verifyCode: that.formInline.verifyCode
                            },
                            success: function(data){
                                var cookie = that.$util.cookie();
                                data.data && data.data.token && cookie.set('token',data.data.token);
                                data.data && data.data.name && cookie.set('name',data.data.name);
                                that.$Message.info({
                                    content: data.msg,
                                    duration: 1,
                                    onClose: function(){
                                        that.$router.push({
                                            name: 'index',
                                            params: {}
                                        })
                                    }
                                });
                            },
                            fail: function(msg){
                                that.$Message.info(msg);
                                that.sendVilidate();
                            },
                            complete: function (){
                                that.$loading.hide();
                            }
                        })
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .loginBox {
        display: block;
        padding: 30px 50px 15px;
        position: absolute;
        left: 50%;
        top: 50%;
        border: 1px solid #e3e3e3;
        transform: translate(-50%,-50%)
    }
    .loginBox .title {
        padding-bottom: 20px;
    }
    .loginBox .input-width {
        width: 250px;
    }
</style>
